jQuery Colorbox是一款弹出层，内容播放插件，效果极佳，当然我主要是用来弹出图片啦。
jQuery Colorbox不仅有弹性动画效果，淡入淡出效果，幻灯片播放,宽度自定义，还能够ajax加载html,iframe等等，最主要的是它还可以写回调函数
效果演示地址：
1、
2、
3、
4、
5、
下载地址：
文档地址：
一些使用的例子：
$('a.gallery').colorbox({rel:'gal'});// Ajax$('a#login').colorbox();// Called directly, without assignment to an element:$.colorbox({href:"thankyou.html"});// Called directly with HTML$.colorbox({html:"Welcome
"});// Colorbox can accept a function in place of a static value:$("a.gallery").colorbox({rel: 'gal', title: function(){ var url = $(this).attr('href'); return 'Open In New Window';}});
关闭colorbox事件：
写法一： window.parent.$.fn.colorbox.close();
写法二： parent.$.colorbox.close();
或者通过刷新父页面关闭： window.parent.location.reload();
jquery colorbox设置翻译：
| 属性 | 默认值 | 描述 |
| transition | "elastic" | 过渡型。可以设置为“弹性”，“消失”，或“无”。 |
| speed | 350 | 套的褪色和弹性转换速度，以毫秒为单位。 |
| href | false | 这可以被用来作为一种替代锚URL或联想到的URL非锚的元素，如图片或表格按钮。$（“H1”.colorbox（的HREF）{ }”的民族性与地域性：”）； |
| title | false | 这可以作为一个锚定的方式－。 |
| rel | false | 这可以作为一个锚REL的替代方式。这允许用户在一个画廊集团任何元素的组合，或改变现有的关系所以元素不归。$（“a.gallery”.colorbox（REL）：“group1”{ }）；注：值也可以设置为“nofollow”禁用分组。 |
| scalePhotos | true | 如果是真的，如果最大，最大高度，innerwidth，innerheight，宽度或高度已经确定，ColorBox会规模的照片符合这些价值观。 |
| scrolling | true | 如果为false，ColorBox将隐藏溢出内容滚动条。这可以用于与调整相结合的方法（见下文）为一个平稳的过渡，如果你添加内容到方式已经打开的一个实例。 |
| opacity | 0.85 | 叠加的不透明度。范围：0到1。 |
| open | false | 如果属实，将立即打开方式。 |
| returnFocus | true | 如果属实，将回来时的方式出口到元是从。 |
| trapFocus | true | 如果是真的，键盘焦点将限于ColorBox的导航和内容。 |
| fastIframe | true | 如果为false，加载图形去除和oncomplete事件将推迟到iframe的内容已经完全加载。 |
| preloading | true | 允许预压下”、“前”的内容在一个组，在目前的内容加载完毕。设置为false禁用。 |
| overlayClose | true | 如果为false，禁用关闭的方式通过点击背景叠加。 |
| escKey | true | 如果为假，将禁用“ESC”键关闭方式。 |
| arrowKey | true | 如果为假，将禁用左、右方向键从组中的项目之间导航。 |
| loop | true | 如果为假，将禁用环回组开始时的最后一个元素的能力。 |
| data | false | 提交GET或POST值通过一个Ajax请求。数据属性会完全像jQuery的数据参数，如使用AJAX处理（）的方式。 |
| className | false | 增加一个给定的类的方式和覆盖。 |
| fadeOut | 300 | 毫秒淡出速度，集，当关闭方式。 |
| closeButton | true | 设置为false将关闭按钮。 |
| Internationalization | ||
| current | "image {current} of {total}" | 文本或HTML的组计数器在观看一组。{ }和{ }当前总的检测和实际的数字方式运行时更换。 |
| previous | "previous" | 文本或HTML以前在观看一组按钮。 |
| next | "next" | 文本或HTML的下一个按钮在观看一组。 |
| close | "close" | 文本或HTML for the Close按钮。the ESC关闭colorbox也将是关键。 |
| xhrError | "This content failed to load." | 错误消息时，Ajax的内容对于一个给定的URL不能加载。 |
| imgError | "This image failed to load." | 错误消息时给出一个链接到一个图像加载失败。 |
| Content Type | ||
| iframe | false | 如果是真的，指定的内容应在iframe中显示。 |
| inline | false | 如果是真的，从当前文档的内容可以通过href属性jQuery选择器显示jQuery对象，或。 使用A /选择器：$（“#内联”.colorbox（）{内嵌链接：威胁：“# myform”}）； // Using a jQuery object:var $form = $("#myForm");$("#inline").colorbox({inline:true, href:$form}); |
| html | false | 显示一个字符串的HTML或文本：$.colorbox({html:"<p>Hello</p>"}); |
| photo | false | 如果是真的，这个设置军队的方式来显示链接的照片。用这个当照片自动检测失败（如使用URL的照片。PHP '而不是'照片.jpg”） |
| ajax | 这个属性实际上不作为的方式承担所有的所有应被视为Ajax或照片，除非另一个指定的内容类型。 | |
| Dimensions | ||
| width | false | 设定一个固定的总宽度。这包括边框和按钮。例如：“100%”、“500px”，或500 |
| height | false | 设定一个固定的总高度。这包括边框和按钮。例如：“100%”、“500px”，或500 |
| innerWidth | false | 这是一个替代“宽度”用来设置一个固定的内部宽度。这不包括边框和按钮。例如：“50%”、“500px”，或500 |
| innerHeight | false | 这是另一种“高度”用来设置一个固定的内部高度。这不包括边框和按钮。例如：“50%”、“500px”，或500 |
| initialWidth | 300 | 设置初始宽度，正在加载任何内容之前。 |
| initialHeight | 100 | 设置初始高度，正在加载任何内容之前。 |
| maxWidth | false | 设置内容的最大宽度。例如：“100%”，500，“500px” |
| maxHeight | false | 设置内容的最大高度。例如：“100%”，500，“500px” |
| Slideshow | ||
| slideshow | false | 如果是真的，增加了一个自动的幻灯片内容组/画廊。 |
| slideshowSpeed | 2500 | 设置幻灯片的速度，以毫秒为单位。 |
| slideshowAuto | true | 如果是真的，幻灯片将自动开始播放。 |
| slideshowStart | "start slideshow" | 为幻灯片开始按钮文字。 |
| slideshowStop | "stop slideshow" | 停止自动滑动按钮的文本 |
| Positioning | ||
| fixed | false | 如果是真的，颜色框将显示在一个固定的位置，在游客的视口。这是不同于默认的绝对定位相对于文档。 |
| top | false | 接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
| bottom | false | 接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
| left | false | 接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
| right | false | 接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
| reposition | true | 复位方式如果窗口的Resize事件触发。 |
| Retina Images | ||
| retinaImage | false | 如果是真的，方式将减少与屏幕的像素比目前的照片 |
| retinaUrl | false | 如果是真的，该设备具有高分辨率显示器，ColorBox会与retinasuffix扩展替换当前照片的文件扩展名 |
| retinaSuffix | "@2x.$1" | 如果retinaurl真实设备具有高分辨率显示器，href值将其延伸扩展这个后缀。例如，默认值会改变`相片，JPG `到` my-photo@2x.jpg ` |
| Callbacks | ||
| onOpen | false | 回调，火灾对ColorBox开始打开之前。 |
| onLoad | false | 回调，火灾就在试图加载的目标内容。 |
| onComplete | false | 回调后加载内容显示火灾。 |
| onCleanup | false | 回调，在关闭过程的生火。 |
| onClosed | false | 回调，火灾一旦ColorBox关闭。 |
公共方法
| $.colorbox() | 这种方法允许您调用的方式而无需将它分配给一个元素。.colorbox美元（的HREF：“login.php”{ }）； |
| $.colorbox.next() $.colorbox.prev() | 这些方法移动到下一个和上一组的项目，按“下一步”或“前进”按钮相同。 |
| $.colorbox.close() | 此方法启动关闭序列，不立即完成。灯箱将完全关闭，只有当cbox_closed事件/亲密的回调是解雇 |
| $.colorbox.element() | 此方法用于获取方式是与当前的HTML元素。返回一个包含元素的jQuery对象。var $element = $.colorbox.element(); |
| $.colorbox.resize() | 这允许的方式来调整基于自己的自动计算，或为特定的大小。这一定是Colorbox之后的内容有手动加载称为。可选的参数对象可以接受宽度或innerwidth和高度或innerheight。没有指定宽度或高度，ColorBox会尝试重新计算其当前内容的高度。 |
| $.colorbox.remove() | 删除所有痕迹的方式从文件。不一样的方式（），其中美元。把颜色框起来供以后使用。 |
事件：
| cbox_open |
| 当Colorbox第一次打开触发器，但在几个关键变量的赋值发生。 |
| cbox_load |
| 触发器在开始的阶段，内容类型确定装。 |
| cbox_complete |
| 触发时，过渡已经完成，新加载的内容已被发现。 |
| cbox_cleanup |
| 触发器为关闭方法开始。 |
| cbox_closed |
| 触发器为近端的方法 |